import React, { Component } from 'react'
class Field extends Component {
    render() {
        return (
          <div style={{background: 'yellow'}}>
              <label>{this.props.uname}</label>
              <input type={this.props.type} value={this.props.value} onChange={(e)=>{this.props.onChangeEvent(e.target.value)}}/>
          </div>
        )
      }
}

export default class App extends Component {
    state={
        uname:localStorage.getItem('uname'),
        password:''
    }
  render() {
    return (
      <div>
          <h1>login</h1>
          <Field label="uname" type="text" value={this.state.uname} onChangeEvent={(value)=>{this.setState({uname:value})}}/>
          <Field label="password" type="password" value={this.state.password} onChangeEvent={(value)=>{this.setState({password:value})}}/>
          <button onClick={()=>{console.log('密码',this.state.uname,'账号',this.state.password)}}>login</button>
          <button onClick={()=>{this.setState({uname:'',password:''})}}>cancle</button>
      </div>
    )
  }
}
